<template>
    <div class="main-shop-home" v-if="!loading">
        <van-search v-model="keyword" placeholder="Search" />
        <section>
            <header>
                <h3>Categories</h3>
                <router-link class="link" :to="{name: 'CategoriesIndex'}">See All</router-link>
            </header>
            <div class="warp">
                <div class="box" :style="{width: `${categories.length > 3 ? categories.length * 30.3 : 100}vw`}">
                    <router-link :to="item.url" class="categories-list" v-for="(item, index) in categories" :key="index">
                        <van-image
                            class="img"
                            round
                            :src="item.categories_img"
                        />
                        <div class="categories_name">{{item.categories_name}}</div>
                    </router-link>
                </div>
            </div>
        </section>
        <section>
            <header>
                <h3>Pass through</h3>
                <router-link class="link" :to="{}">See All</router-link>
            </header>
            <div class="warp">
                <div class="box" :style="{width: `${goods_recommend_items.length > 3 ? goods_recommend_items.length * 45.45 : 100}vw`}">
                    <router-link :to="item.url" class="goods-list" v-for="(item, index) in goods_recommend_items" :key="index">
                        <div class="goods">
                            <van-image
                                class="img"
                                radius="5px"
                                :src="item.goods_cover"
                            />
                            <h3 class="goods_name">{{item.goods_name}}</h3>
                            <div class="goods_attr">{{item.goods_attr}}</div>
                            <div class="goods_sku">
                                <van-row justify="space-between" align="center">
                                    <van-col>
                                        <span class="goods_price">$ {{item.goods_price}}</span>
                                    </van-col>
                                    <van-col>
                                        <div class="goods_add" @click.stop="setCart($event, item)"><van-icon name="add" color="#3AA24C" size="30px" /></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
        </section>
    </div>
    <van-skeleton title :row="15" :loading="loading" v-else />
</template>

<script lang="ts" setup>
import { Toast } from 'vant'
import { ref, watch, reactive, provide, onMounted  } from 'vue'
import { useStore } from 'vuex'
import { GetGoodsRecommendList, GetCategorieList } from '../../api/index'
import router from '../../router'

interface Goods {
    goods_id: string;
    goods_img: string;
    goods_name: string; 
    goods_attr: string; 
    goods_cover: string;
    goods_price: number;
    url: {name: string;query?:{}}
}

interface Categories {
    categories_img: string;
    categories_name: string;
    cid: number;
    url: {name: string; query?:{}}
}

const loading = ref(true)
const store = useStore()

const keyword = ref('')

const categories = ref<Array<Categories>>([])

const goods_recommend_items = ref<Array<Goods>>([])

const setCart = (e: any, goods: Goods) => {
    e.preventDefault()
    store.dispatch('addCart', {data: goods, num: 1})
    router.push({name: 'CartIndex'})
}

const getGoodsRecommendList = () => {
    return GetGoodsRecommendList({}).then((res: any)=>{
        goods_recommend_items.value = res.data.map((goods: Goods) => {
            return {
                ...goods,
                 url: {
                    name: 'GoodsInfo',
                    query: {
                        gid: goods.goods_id
                    }
                }
            }
        })
    })
}

const getCategorieList = () => {
    return GetCategorieList({}).then((res: any) => {
        categories.value = res.data.map((row: Categories) => {
            return {
                ...row, 
                 url: {
                    name: 'CategoriesInfo',
                    query: {
                        cid: row.cid
                    }
                }
            }
        })
    })
}

onMounted(() => {
    Promise.all([getCategorieList(),getGoodsRecommendList()]).then(()=>{
        loading.value = false
    })
})

</script>

<style lang="less" scoped>
@categorieslen: 3.3;
@goodslen: 2.2;
::-webkit-scrollbar{
    height: 0px;
}
.main-shop-home {
    section {
        padding: 20px 0px 10px 0px;
        header{
            margin: 0px 15px;
            padding: 10px 0px 20px 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            h3{
                margin: 0px;
                font-weight: bold;
                font-size: 22px;
                text-transform: capitalize;
                color: #6D3805;
            }
            .link {
                margin-right: 5px;
                font-size: 18px;
                text-transform: capitalize;
                color: #FF5E00;
            }
        }
        .warp {
            width: 100vw;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            .box {
                width: 600vw;
                display: flex;
                .categories-list{
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    margin-left: 15px;
                    justify-items: center;
                    align-items: center;
                    width: 30.3vw;
                    max-width: (480px/@categorieslen);
                    .img {
                        width: 100%;
                    }
                    .categories_name {
                        margin-top: 20px;
                        font-size: 15px;
                        line-height: 18px;
                        color: #6D3805;
                    }
                    &:last-child {
                        margin-right: 15px;
                    }
                }
                .goods-list {
                    margin: 10px;
                    margin-left: 15px;
                    width: 45.45vw;
                    max-width: (480px/@goodslen);
                    background: #FFFFFF;
                    box-shadow: 0px 0px 13px #C4C4C4;
                    border-radius: 20px;
                    .goods {
                        display: flex;
                        flex: 1;
                        flex-direction: column;
                        justify-items: center;
                        align-items: center;
                        padding: 10px;
                        .img {
                            margin: 15px 0px;
                            width: 50%;
                        }
                        .goods_name {
                            width: 100%;
                            font-size: 15px;
                            line-height: 18px;
                            color: #6D3805;
                            padding: 0px;
                            margin: 10px 0px 0px 0px;
                        }
                        .goods_attr {
                            width: 100%;
                            font-size: 12px;
                            line-height: 14px;
                            color: #929292;
                            margin-top: 5px;
                        }
                        .goods_sku {
                            width: 100%;
                            margin-top: 5px;
                            .goods_price {
                                font-family: Klarna Headline;
                                font-weight: bold;
                                font-size: 20px;
                                line-height: 24px;
                                color: #FF5E00;
                            }
                            .goods_add {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }
            }

        }
    }
}
</style>
